import React from 'react';
import { inject, observer } from 'mobx-react';

import E9TopLogo from './E9TopLogo';
import E9Home from './E9Home';
import E9TopMenu from './E9TopMenu';
import E9FreqUseMenu from './E9FreqUseMenu';
import E9QuickSearch from './E9QuickSearch';
import E9HeaderRight from './E9HeaderRight';

@inject('portalThemeStore')
@observer
class E9Header extends React.Component {
  render() {
    const { portalThemeStore } = this.props;
    const { themeInfo = {} } = portalThemeStore;
    const { themeLogoWidth = '', themeData = {} } = themeInfo;
    const { styleConfig = {} } = themeData;
    const { header = {} } = styleConfig;
    const fontSize = parseInt(header.fontSize || '12px');
    const logoWidth = themeLogoWidth == '' ? 197 : parseInt(themeLogoWidth);

    return (
      <div className={`e9header-container wea-f${fontSize}`}>
        <div className="e9header-left" style={{ width: logoWidth }}>
          <E9TopLogo ecId={`${(this && this.props && this.props.ecId) || ''}_E9TopLogo@6pkaxa`} />
        </div>
        <div className="e9header-right" style={{ marginLeft: logoWidth }}>
          <div className="e9header-right-menu">
            <E9Home ecId={`${(this && this.props && this.props.ecId) || ''}_E9Home@lul5fr`} />
            <E9TopMenu ecId={`${(this && this.props && this.props.ecId) || ''}_E9TopMenu@g9njkk`} />
            <E9FreqUseMenu ecId={`${(this && this.props && this.props.ecId) || ''}_E9FreqUseMenu@7aag3q`} />
            <E9QuickSearch ecId={`${(this && this.props && this.props.ecId) || ''}_E9QuickSearch@dcf5i2`} />
          </div>
          <E9HeaderRight ecId={`${(this && this.props && this.props.ecId) || ''}_E9HeaderRight@z9rtme`} />
        </div>
      </div>
    );
  }
}

export default E9Header;
